<template>
  <div class="panel panel-default tableScroll">
		<div class="panel-body">
			<h3>Table Style</h3>
			<div class="btn-group">
				<button class="btn btn-sm btn-success">Transform</button>
				<button class="btn btn-sm btn-danger">Destroy</button>
				<label class="checkboxStyle"><input class="hover" type="checkbox"><span></span>hover</label>
        <label class="checkboxStyle"><input class="striped" type="checkbox"><span></span>striped</label>
			</div>
			<div class="example">
				<table id="exampleTableFromData" class="table">
					<thead>
						<tr>
							<th data-field="state" data-radio="true"></th>
							<th data-field="Tid" data-sortable="true">ID</th>
							<th data-field="First" data-sortable="true">姓名</th>
							<th data-field="sex" data-sortable="true">性别</th>
							<th data-field="Age" data-sortable="true">年龄</th>
							<th data-field="Score" data-sortable="true">评分</th>
						</tr>
					</thead>
				</table>
			</div>
			<h3>Checkbox Table</h3>
			<div class="example">
				<table id="exampleTableFromData2" class="table">
					<thead>
						<tr>
							<th data-field="state" data-checkbox="true"></th>
							<th data-field="Tid" data-sortable="true">ID</th>
							<th data-field="First" data-sortable="true">姓名</th>
							<th data-field="sex" data-sortable="true">性别</th>
							<th data-field="Age" data-sortable="true">年龄</th>
							<th data-field="Score" data-sortable="true">评分</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</template>

<script>
import '../assets/css/tableScroll.css'
import data from '../util/mock'
import axios from 'axios'
export default {
  name: 'TableScroll',
  data() {
			return {
				tableData: ""
			}
		},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			var _this = this;
			axios.get('/test/mockData', {
					params: {ID: 12345}
				})
				.then(function(res) {
					_this.tableData = res.data.dataArray;
					_this.bootstrapTableFun(_this.tableData,"#exampleTableFromData","375");
					_this.bootstrapTableFun(_this.tableData,"#exampleTableFromData2","375");
				})
				.catch(function(error) {
					console.log(error);
				});
				
				$(".tableScroll").on("click",".btn-group .btn",function(){
					if($(this).hasClass("btn-success")){
						_this.bootstrapTableFun(_this.tableData,"#exampleTableFromData","375");
						$(".btn-group .checkboxStyle input").prop("checked",false);
					}else{
						$('#exampleTableFromData').bootstrapTable('destroy');
					}
				});
				
				$(".tableScroll").on("click",".btn-group .checkboxStyle", function(){
					var classes = "table";
					var $this = $(this);
					if($this.find(".hover").prop("checked")){
						classes = "table table-hover";
					}				
					$('#exampleTableFromData').bootstrapTable('destroy').bootstrapTable({
						classes:classes,
						data:_this.tableData,
						striped:$this.find(".striped").prop("checked"),
						height:"375"
					});
				});
		},
		bootstrapTableFun(tableData,obj,height){
			$(obj).bootstrapTable({
				data: tableData,
				height: height
			});
		}
	}
}
</script>
